import { useEffect, useId, useState } from "react"
import IndicatorCard from "./components/IndicatorCard";
import Styles from './index.module.css'
import Progress from "../../components/Progress";
import BarEchhart from "@/echarts/bar";
import { barOptions, indicatorData, kOptions } from './data';
import Charts from "@/echarts/Charts";
import { useSelector } from 'react-redux'

const Dashboard = () => {

  const userInfo = useSelector((state: any) => state.users)
  console.log('Dashboard-userInfo', userInfo);


  // 饼图dom的id
  const barId = useId();

  // 折线图dom的id
  const candlestickID = useId();

  // 指标卡片数据
  const [cardData, setCardData] = useState(indicatorData);

  // app列表数据
  const [appData, setAppData] = useState([
    {
      name: '',
      title: '',
      score: 3,
      reviews: 40,
      rate: [],
    }
  ])

  useEffect(() => {
    setCardData(indicatorData);
    setAppData([  {
      name: '',
      title: '',
      score: 3,
      reviews: 40,
      rate: [],
    }])
  },[])

  return (
    <div>
      <div className={Styles.echarts}>
        <BarEchhart height={300} id={barId} options={barOptions} />
      </div>
      <div className={Styles.indicatorCard}>
        {
          cardData.map((data) => (
            <div key={data.title} className={Styles.card
            }>
              <IndicatorCard item={data} />
            </div>
          ))
        }
      </div>

      <div>
        {
          appData.map(v => (
            <Progress key={v.title} />
          ))
        }
      </div>

      <div className={Styles.rowBox}>
        <div className={Styles.newsList}>
          {
            cardData.map((data) => (
              <div className={Styles.newCard} key={`new-${data.title}`}>{data.desc}</div>
            ))
          }
        </div>
        <div  className={Styles.candlestickCard}>
          <Charts id={candlestickID} height={400} options={kOptions} />
        </div>
      </div>



      <div className={Styles.line}>

      </div>
    </div>
  )
}

export default Dashboard